<script setup>
import HomeHeader from "@/components/home/homeHeader.vue";
import HomeMainTop from "@/components/home/homeMainTop.vue";
import HomeMainData from "@/components/home/homeMainData.vue";
import ImgCarousel from "@/components/carousel/imgCarousel.vue";
import {ref} from "vue";


// 书籍轮播图数据
const imgCarouselData = ref([]);
// 书籍列表数据
const BookListData = ref([]);
// onMounted(() => {
//   getCarousel().then(res => {
//     imgCarouselData.value = res.data;
//   })
// })
BookListData.value = [{
  imageSrc:  "default-avatar",
  title: "书名",
  intro: "简介",
  category: 1,
  author: "作者",
  publisher: "出版社",
  score: "评分"
}];

const activeName = ref('1')
const handleClick = function () {
  console.log(activeName.value)
  BookListData.value = [{
    imageSrc: "default-avatar",
    title: "书名",
    intro: "简介",
    category: "类型"+activeName.value,
    author: "作者",
    publisher: "出版社",
    score: "评分"
  }]
}
</script>

<template>
  <el-container>
    <el-header>
      <homeHeader></homeHeader>
    </el-header>
    <el-main>
      <!-- 地址转跳栏 -->
      <home-main-top></home-main-top>

      <img-Carousel :carousel-arr="imgCarouselData"></img-carousel>


      <el-tabs v-model="activeName"
               type="card"
               class="demo-tabs"
               @tab-change="handleClick">
        <el-tab-pane label="推荐书籍" name="Recommended"></el-tab-pane>
        <el-tab-pane label="最新书籍" name="Latest"></el-tab-pane>
        <el-tab-pane label="高分书籍" name="HighScoring"></el-tab-pane>
        <el-tab-pane label="最近更新" name="LastUpdate"></el-tab-pane>
      </el-tabs>
      <home-main-data :book-arr="BookListData"></home-main-data>
    </el-main>
  </el-container>
</template>

<style scoped>
.el-container {
  /* 添加最大宽度样式 */
  max-width: 1920px;
  /* 可以根据需要调整这个值 */
  margin-left: auto;
  margin-right: auto;
}

.el-header {
  height: auto;
  padding: 15px 3%;
  width: 100%;
  /* height: 90px; */


  border-bottom: 1px solid #4b5461;
  background-image: url("@/assets/img/bilibili/banner.png");
  background-position: center center;
  background-repeat: no-repeat;
  font-size: 24px;
}

.el-main {
  background: #f0f2f5;
}

.demo-tabs {
  margin-top: 10px;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

</style>
